import {View, Text, Image} from '@tarojs/components'
import React, {useState,useEffect} from 'react'
import "./homeNew.less"
import Taro from "@tarojs/taro"
import {Swiper, SwiperItem} from '@tarojs/components'
import goodImg from "../../../img/tabbarIcon/2.png";
import store from "../../../store";
import {toJS} from "mobx";

// import {useEffect} from "react";
function getStart(score){
    let a= Math.ceil(score)
    let arr=[]
    for (let i=1;i<=a;i++){
        arr.push(i)
    }
    return arr
}

function New() {
    const [num, setNum] = useState([])
    const [newData, setNewData] = useState(toJS(store.newData))
    
    useEffect(()=>{
        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(toJS(store.newData))
        if (store.newData.length>9){
            // let data =
            setNewData(store.newData.splice(0,9))
        }else {
            let num = arr.splice(0,store.newData.length)
            setNum(num)
        }
    },[])
   // 跳转详情页面
   const getMore=(item)=>{
       store.setDataId(item.id)
       store.setSid(item.bid)
       Taro.navigateTo({
           url: "../../details/details"
       })
   }
    // const [star,setStar]=useState([])
   
    return (
        <View className="new">
            <View style={{overflow: "hidden"}}>
                <View className="newTitle">最新精选商品</View>
                <View className="jishu">
                    <Text className="zero">0</Text>
                    <Swiper
                        className='test-h'
                        indicatorColor='#999'
                        indicatorActiveColor='#333'
                        vertical
                        circular
                        current={0}
                        autoplay
                    >
                        {num.map((item) => {
                            return (
                                <SwiperItem>
                                    <View className='number'>{item}</View>
                                </SwiperItem>
                            )
                        })}
                    </Swiper>
                </View>
            </View>
            <View className="lunbo">
                <Swiper
                    className='test-h'
                    indicatorColor='#999'
                    indicatorActiveColor='#333'
                    circular
                    autoplay
                    current={0}
                    >
                    {newData.map((item) => {
                        return (
                            <SwiperItem onClick={()=>{getMore(item)}}>
                                <Image src={item.img} className="img"/>
                            </SwiperItem>
                        )
                    })}
                
                </Swiper>
            </View>
            <View className="goodData">
                <Swiper
                    className='test-h'
                    indicatorColor='#999'
                    indicatorActiveColor='#333'
                    circular
                    current={0}
                    autoplay
                    duration={700}>
                    {newData.map((item)=>{
                        return(
                            <SwiperItem  onClick={()=>{getMore(item)}}>
                                <View className="title">
                                    {item.name}
                                </View>
                                <View className="text">
                                    {item.text}
                                </View>
                                <View className="price">
                                    ￥{item.price}
                                </View>
                                <View className='bottom'>
                                    <View className="left">
                                        <View>{item.grade}</View>
                                        <View>
                                            {getStart(item.grade).map(()=>{
                                                return(
                                                    <View className='at-icon at-icon-star-2'/>
                                                )
                                            })}
                                        </View>
                                    </View>
                                    <View className="right">
                                        <View className='at-icon at-icon-chevron-right'/>
                                    </View>
                                    <View className="center">
                                        <View>{item.sum}</View>
                                        <View className="xiaoliang">总销量/件</View>
                                    </View>
    
                                </View>
                            </SwiperItem>
                        )
                    })}
                </Swiper>
             
            </View>
        </View>
    )
}

export default New